<template>
	<view class="tiezi">
		<scroll-view scroll-y="true" @scrolltolower="loadMore" @scrolltoupper="refresh" :enable-back-to-top="true"
			:lower-threshold="30" :scroll-top="scrollTop" style="height: 700rpx;">
			<view class="card_one">

				<view class="card_main" v-for="(item,index) in arr" :style="{marginTop:index == 0 ? '0' : '20rpx'}">
					<view class="first">
						<view class="left_img">
							<image :src="item.expertPhoto != null ? getImgUrl(item.expertAvatar) : 'https://img95.699pic.com/xsj/10/tm/0h.jpg%21/fh/300'" mode="" style="width:80rpx ;height: 80rpx;border-radius: 50%;"></image>
						</view>
						<view class="right_font">
							<view class="guapi">
								{{item.nickname}}
							</view>
							<view class="redu">
								<image :src="reduimg" mode=""
									style="width: 40rpx;height: 32rpx;opacity: 1;vertical-align: bottom;"></image>
								<text>热度</text> <text>23W</text>
							</view>
						</view>
					</view>
					<view class="second">
						{{item.postContent}}
					</view>
					<view class="three">
						<image :src="i.pricturePath" mode="" class="imgone"
							v-for="(i,index) in item.postPicture"></image>
					</view>
					<view class="footer">
						<view class="">
							<uni-icons custom-prefix="eye" type="eye" size="30"
								style="vertical-align: middle;"></uni-icons>
							<text class="count">{{item.pageView}}</text>
						</view>
						<view class="">
							<uni-icons custom-prefix="chat" type="chat" size="30"
								style="vertical-align: middle;"></uni-icons><text
								class="count">{{item.numberOfComments}}</text>
						</view>
						<view class="">
							<uni-icons custom-prefix="hand-up" type="hand-up"
								:color="item.like == 1 ? 'red' : '#333333'" size="30" style="vertical-align: middle;"
								@click="Icons(item.id,item.numberLikes,item.like,index)"></uni-icons><text
								class="count">{{item.numberLikes}}</text>
						</view>
					</view>
				</view>
			</view>
		</scroll-view>
		<view class="btn">
			<button class="ft_btn" @click="consultation">开启语音文字咨询</button>
		</view>

	</view>
</template>

<script>
	import {
		postList
	} from '@/utils/OnetoOneaApi.js'
	import {
		addLikeAPI
	} from '@/utils/api.js'
	import {
		baseURL,
		imgBaseUrl
	} from '@/utils/baseUrl.js'

	export default {
		data() {
			return {
				imgs: '',
				reduimg: imgBaseUrl + '/img/allImgs/forum/hot.svg',
				arr: [],
				pageNo: 1,
				pageSize: 10,
				id: ''
			}
		},
		mounted() {
			this.Datalist(this.$parent.id)
			this.id = this.$parent.id
		},
		methods: {
			async Datalist(id) {
				const status = 0
				const res = await postList(id, status, this.pageNo)
				const data = res.result.records
				this.arr = data
			},


			//点赞
			async Icons(id, numberLikes, like, index) {
				console.log(id, numberLikes, like, index);
				let params = {}
				let obj = {}
				if (like == 1) {
					params = {
						id,
						like: 0,
						numberLikes: numberLikes - 1
					}
					this.arr[index].like = 0;
					this.arr[index].numberLikes = numberLikes - 1;
					obj = this.arr[index]
				} else {
					params = {
						id,
						like: 1,
						numberLikes: numberLikes + 1
					}
					this.arr[index].like = 1;
					this.arr[index].numberLikes = numberLikes + 1;
					obj = this.arr[index]
				}
				await addLikeAPI(params);
				this.$set(this.arr, index, obj)
			},
			//下拉刷新
			async loadMore() {
				const status = 0
				this.pageNo++
				const res = await postList(this.id, status, this.pageNo)
				this.data = [...this.data, ...res.result.records]
			},
			//开启语音咨询
			consultation(){
			uni.navigateTo({
				url:'../../pages/Conpayment/Conpayment'
			})
			}
		}
	}
</script>

<style scoped lang="less">
	.tiezi {
		width: 100%;
		// height: 100vh;
		background: #F5F5F7;

		.card_one {
			width: 100%;
			height: 755rpx;
			border-radius: 0px 0px 0px 0px;
			opacity: 1;
			background: #F5F5F7;

			.card_main {
				padding: 20rpx 40rpx 0rpx 40rpx;
				background: #FFFFFF;
				margin-top: 20rpx;

				.first {
					display: flex;

					.right_font {
						margin-left: 20rpx;
						line-height: 38rpx;

						.guapi {
							font-size: 30rpx;
							font-family: PingFang SC-Medium, PingFang SC;
							font-weight: 500;
							color: #222229;
						}

						.redu {
							font-size: 26rpx;
							font-family: PingFang SC-Regular, PingFang SC;
							font-weight: 400;
							color: #666666;
						}
					}
				}

				.second {
					font-size: 32rpx;
					font-family: PingFang SC-Regular, PingFang SC;
					font-weight: 400;
					color: #222229;
					line-height: 50rpx;
					padding: 20rpx 0 10rpx 0;
				}

				.three {
					padding: 0rpx 0 20rpx 0;
					display: flex;
					justify-content: space-between;
					flex-wrap: wrap;
					
					.imgone {
						width: 218rpx;
						height: 218rpx;
						border-radius: 16rpx 16rpx 16rpx 16rpx;
						opacity: 1;
						margin-top: 10rpx;
					}
				}

				.footer {
					display: flex;
					justify-content: space-evenly;

					.count {
						font-size: 28rpx;
						font-family: PingFang SC-Medium, PingFang SC;
						font-weight: 500;
						color: #4A4A4A;
					}
				}
			}
		}

		.btn {
			background-color: #FFFFFF;

			.ft_btn {
				width: 343px;
				height: 44px;
				color: #FFFFFF;
				background: #FF7F22;
				border-radius: 4px 4px 4px 4px;
				opacity: 1;
				font-family: PingFang SC-Bold, PingFang SC;
				font-size: 16px;
			}
		}

	}
</style>